<!DOCTYPE html>
<html>
<head>
<title>A Exhibit from a tsv or csv file</title>
    <link rel='stylesheet' href='http://www.simile-widgets.org/styles/common.css' type='text/css' />
</head>

<body>
    <ul id="path">
      <li><a href="http://www.simile-widgets.org/">SIMILE Widgets</a></li>
      <li><a href="http://www.simile-widgets.org/exhibit/">Exhibit</a></li>
      <li><a href="..">Demos</a></li>
      <li><span>CSV Importer Tutorial</span></li>
    </ul>

<h1>
How to make an Exhibit from a tsv or csv file
</h1>

This tutorial walks you through the steps of setting up an Exhibit
from a tsv or csv file. Here are the <a href="italian-soccer.html">example exhibit</a> and the data
files in both formats: <a href="italianSoccer.csv">csv</a> and <a href="italianSoccer.tsv">tsv</a>.

 
<h2>
Setting up the Exhibit
</h2>
To make your TSV/CSV Exhibit, you should first follow the Getting
Started Tutorial to set up the initial html page. The link to the data
however should be similar to the following, depending on the file's
format:

<div>
<code>
&langle;link href="italianSoccer.csv" type="text/csv" rel="exhibit/data"/&rangle;
</code>
</div>

or
<div>
<code>
&langle;link href="italianSoccer.txt" type="text/tsv" rel="exhibit/data"/&rangle;
</code>
 </div>
<h2>
Formatting the Data
</h2>

If you are creating the tsv/csv file yourself , the first line should
provide the names of the properties along with their value types as
shown below. In the case that the value type is .text., then you do
not have to specify it as it is the default type.

<div>
<code>
label,url:url,image:url,City,Region,Winners,Runner-up,Championship
Seasons
</code>
</div>

or

<div>
<code>
label   url:url image:url      City    Region  Winners Runner-up
Championship Seasons
</code>
</div>

 
<h2>
Adding the Property Names and Value Types
</h2>
If instead the data is taken from another website and you would like
to add or replace the existing property names to match the Exhibit
format, you must change the link so that it follows the structure
below:

 <div>
<code>
&langle;link href="italianSoccer.txt" type="text/tsv" rel="exhibit/data"
<br>
data-ex-properties="label,url:url,image:url,City,Region,latlng,Winners:number,Runner-up:number,ChampionshipSeasons"
data-ex-has-column-titles="true"/&rangle;
</code>
</div>
 

The <code>data-ex-properties</code> attribute allows you to specify a comma-separated
list of names and types for the properties. The
<code>data-ex-has-column-titles</code> attribute, which is set to true by default, lets
you specify whether the data file already contains a header row. If a
list of properties is specified in <code>data-ex-properties</code> and
<code>data-ex-has-column-titles</code> is set to true, the property list will override the
existing header row. Note, you will get an error if you set
<code>data-ex-has-column-titles</code> to false and do not provide a list of property
names.

 
</body>
</html>
